<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干活不累 - 用户 - 网易云音乐</title>
    <!-- 标签图标 -->
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <!-- 网页需要初始化的css -->
   <link rel="stylesheet" href="./css/base.css">
   <!-- 放公共样式  网页头部和底部   版心 -->
   <link rel="stylesheet" href="./css/common.css">
   <!-- 样式 -->
   <link rel="stylesheet" href="./css/index.css">
   <!--  -->
   <link rel="stylesheet" href="./css/footer.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div id="g-topbar" class="g-topbar">
        <div class="m-top">
            <div class="wrap">
                <!-- logo -->
                <h1 class="logo">
                    <a href="../index/index.html">网易云音乐</a>
                </h1>
                <!-- ul -->
                <ul class="m-nav">
                    <li>
                        <span>
                            <a href="../index/index.html">
                                发现音乐
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="../mine/mine.html">
                                我的音乐
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="#">
                                关注
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="../Shopping/Shopping.html">
                                商城
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="../musician/musician.html">
                                音乐人
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="../download/download.html">
                                下载客户端
                            </a>
                        </span>
                        <em></em>
                    </li>
                </ul>
                <!-- 登录 -->
                <div class="m-tophead">
                    <a href="../user/user.html">登录</a>
                    <div class="m-tlist">
                    </div>
                </div>
                <!-- 创作者中心 -->
                <a href="../create/create.html" class="m-topvd">创作者中心</a>
                <!-- 搜索框 -->
                <div class="m-srch">
                    <div class="srchbg">
                        <span class="parent">
                            <input type="text" class="txt">
                            <label class="ph">音乐/视频/电台/用户</label>
                            <div class="m-srch1">
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                                <p>1</p>
                            </div>
                        </span>
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- 红色下横线 -->
        <div class="m-subnav"></div>
    </div>
    <!-- 内容区域 -->
    <div class="g-bd">
        <div class="g-wrap">
            <!-- 个人信息部分start -->
            <div class="m-proifo">
                <img src="./user.jpg" alt="">
                <div class="user-item">
                    <div class="wrap">
                        <span class="tit">久梦LH</span>
                        <span class="vip-level"></span>
                        <span class="lev">
                            8
                            <i class="right"></i>
                        </span>
                        <i class="icn"></i>
                        <a href="#" class="chat">
                            <i>发私信</i>
                        </a>
                        <a href="#" class="fav">
                            关 注
                        </a>
                    </div>
                    <ul class="data">
                        <li>
                            <a href="#">
                                <strong>0</strong>
                                <span>动态</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>6</strong>
                                <span>关注</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>7</strong>
                                <span>粉丝</span>
                            </a>
                        </li>
                    </ul>
                    <div class="inf">个人介绍：我没走，还在这</div>
                    <div class="inf">
                        <span class="sep">所在地区：湖北省 - 黄冈市</span>
                        <span>&nbsp;年龄：95后</span>
                    </div>
                </div>
            </div>
            <!-- 个人信息部分end -->
            <!-- 听歌排行start -->
            <div class="g-song">
                <div class="u-title">
                    <div class="left" style="float: left">
                        <h3 style="float: left">听歌排行</h3>
                        <h4 style="float: left">累积听歌5245首</h4>
                        <a href="#" class="u-left"></a>
                        <div class="i">
                            <p>实际播放时间过短的歌曲将不纳入计算。</p>
                            <i class="t"></i>
                            <i class="b"></i>
                        </div>
                        <script>
                            const a = document.querySelector('.u-left')
                            const i = document.querySelector('.i')
                            a.addEventListener('mouseenter',function(){
                                i.style.display= 'block'
                            })
                            a.addEventListener('mouseleave',function(){
                                i.style.display= 'none'
                            })
                        </script>
                    </div>
                    <div class="right" style="float: right">
                        <span class="week">最近一周</span>
                        <i></i>
                        <span class="time">所有时间</span>
                    </div>
                
                </div>
                
                <!-- js:歌名循环 -->
                <script src="./js/g-song.week.js"></script>
                <script src="./js/g-song.time.js"></script>
                <script>
                    const week = document.querySelector('.week')
                    const time = document.querySelector('.time')
                     const hd2 = document.querySelectorAll('.u-hd2')
                     const hd1 = document.querySelectorAll('.u-hd')
                    week.addEventListener('click',function(){
                       for(let i = 0;i<hd2.length;i++){
                        hd2[i].style.display='none'
                       }
                       for(let i = 0;i<hd1.length;i++){
                        hd1[i].style.display='flex'
                       }
                    })
                    time.addEventListener('click',function(){
                        for(let i = 0;i<hd1.length;i++){
                        hd1[i].style.display='none'
                       }
                       for(let i = 0;i<hd2.length;i++){
                        hd2[i].style.display='flex'
                       } 
                    })
                </script>

                <div class="u-title">
                    <h3>久梦LH创建的歌单（8）</h3>
                </div>        
                <!-- js:歌单循环 -->
                <div class="songs">
                    <script src="./js/g-songs.js"></script>
                </div>

                <div class="u-title">
                    <h3>久梦LH收藏的歌单（31）</h3>
                </div>
                <!-- js:歌单循环 -->
                <div class="songs2">
                    <script src="./js/g-songs2.js"></script>
                </div>

            </div>
            <!-- 听歌排行end -->
        </div>
    </div>
    <!-- 底部 -->
    <div class="g-ft">
        <div class="m-ft">
           <div class="f-cd">
              <ul>
                 <li>
                    <a href="#" class="a1">
                       <span></span>
                       <p>音乐开放平台</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a2">
                       <span></span>
                       <p>云村交易所</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a3">
                       <span></span>
                       <p>Amped Studio</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a4">
                       <span></span>
                       <p>用户认证</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a5">
                       <span></span>
                       <p>独立音乐人</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a6">
                       <span></span>
                       <p>赞赏</p>
                    </a>
                 </li>
                 <li>
                    <a href="#" class="a7">
                       <span></span>
                       <p>视频激励</p>
                    </a>
                 </li>
              </ul>
           </div>
           <div class="copy">
              <p class="p1">
                 <a href="#">服务条款</a><span>|</span>
                 <a href="#">隐私政策</a><span>|</span>
                 <a href="#">儿童隐私政策</a><span>|</span>
                 <a href="#">版权投诉</a><span>|</span>
                 <a href="#">投资者关系</a><span>|</span>
                 <a href="#">广告合作</a><span>|</span>
                 <a href="#">联系我们</a>
              </p>
              <p>
                 <a href="#">廉正举报</a>
                 <span class="s1">不良信息举报邮箱:51jubao@service.netease.com</span>
                 <span>客服热线：95163298</span>
              </p>
              <p>
                 <span>互联网宗教信息服务许可证：浙（2022）0000120</span>
                 <a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
                 <span class="police"><img src="./images/police.png" style="width: 14px; height: 14px; margin-left: 5px;"></span>
                 <a href="#">浙公网安备 33010902002564号</a>
              </p>
              <p>
                 <span>网易公司版权所有©1997-2022</span>
                 <span>杭州乐读科技有限公司运营：</span>
                 <a href="#">浙网文[2021] 1186-054号</a>
              </p>
  
           </div>
        </div>
        <a href="#" class="top">TOP</a>
     </div>
     <!-- 尾部区域结束 -->
     <style>
        html {
           /* 滚动的行为：丝滑 */
           scroll-behavior: smooth;
        }
     </style>
     <script>
        const el = document.querySelector('.top')
        window.addEventListener('scroll', function () {
           //获取页面滚动的距离
           const n = document.documentElement.scrollTop
           if (n > 70) {
              //侧边栏显示
              el.style.opacity = 1
           } else {
              //侧边栏隐藏
              el.style.opacity = 0
           }
        })
  
        const backTop = document.querySelector('.g-topbar')
        backTop.addEventListener('click', function () {
           document.documentElement.scrollTop = 0
        })
     </script>

<div class="f-updown">
    <!-- 锁 -->
    <div class="locks">
       <div class="lock">
          <a href="#" class="button"></a>
       </div>
       <div class="lock-right"></div>
    </div>
    <!-- 背景图 -->
    <div class="background"></div>
    <div class="hand"></div>
    <!-- 播放部分 -->
    <div class="f-play-music">
       <div class="btns">
          <a href="#" class="prev"></a>
          <a href="#" class="play"></a>
          <a href="#" class="next"></a>
       </div>
       <div class="def-cover">
          <img src="./images/default_album.jpg" alt="">
          <a href="#"></a>
       </div>
       <div class="play-process">
          <div class="words"></div>
          <!-- 外部容器 -->
          <div class="pbar">
             <!-- 包裹进度条 -->
             <div class="barbg">
                <!-- 进度条 -->
                <div class="ready">
                   <!-- 圆角 -->
                   <div class="curser">
                      <span class="btn"></span>
                   </div>
                </div>
             </div>
             <span class="time">
                <em>00:00</em>
                / 00:00
             </span>

          </div>
       </div>
       <!-- 收藏分享部分 -->
       <div class="operations">
          <a href="#" class="icn icn-pip"></a>
          <a href="#" class="icn icn-add"></a>
          <a href="#" class="icn icn-share"></a>
       </div>
       <div class="controls">
          <!-- 音量控制按键 -->
          <a href="#" class="icn volume"></a>
          <div class="m-vol">
             <div class="barbg"></div>
             <div class="vbg">
                <div class="curr">
                   <span class="btn"></span>
                </div>
             </div>
          </div>
          <!-- 播放方式 -->
          <a href="#" class="icn mode"></a>
          <div class="modetip">随机</div>
          <!-- 播放列表 -->
          <span class="add">
             <a href="#" class="icn list"></a>
          </span>
          <div class="f-playlist">
             <div class="listhd">
                <h4>播放列表（0）</h4>
                <a href="#" class="addall">
                   <span></span>
                   收藏全部
                </a>
                <span class="line"></span>
                <a href="#" class="clear">
                   <span></span>
                   清除
                </a>
                <span class="f-close"></span>
             </div>
             <div class="listbd">
                <div class="listmsk">
                   <div class="msk">
                      <i></i>
                      你还没有添加任何歌曲
                      <br>
                      去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                   </div>
                </div>
                <div class="bline"></div>
                <div class="ask">
                   <a href="#"></a>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

 <script>
    //阻止所有的a刷新界面
    const as=document.querySelectorAll('.f-updown a')
    for (let i=0;i<as.length;i++) {
       as[i].addEventListener('click',function(e) {
       e.preventDefault()
    })
    }
    //底部显示隐藏
    const hand = document.querySelector('.f-updown')
    const lock = document.querySelector('.lock a')
    let flag=true
    hand.addEventListener('mouseenter', function () {
       document.querySelector('.f-updown').style.bottom = 0
    })
    function fn() {
       document.querySelector('.f-updown').style.bottom = '-45px'
    }
    hand.addEventListener('mouseleave', fn)
    //锁
    lock.addEventListener('click',function() {
       flag=!flag
       if (flag) {
          lock.classList.remove('lockdown')
          hand.addEventListener('mouseleave', fn)
       } else {
          lock.classList.add('lockdown')
          document.querySelector('.f-updown').style.bottom = 0
          hand.removeEventListener('mouseleave', fn)
       }
       
    })
    //进度条
    const ready=document.querySelector('.ready')
    const curser=document.querySelector('.pbar .curser')
    curser.onmousedown=function(e) {
       e=e||window.e
       const progressLeft = e.clientX - this.offsetLeft
       document.onmousemove = function(e) {
       e=e||window.e
          const progressX = e.clientX - progressLeft
          if(progressX<=0){
                progressX = 0;
            }
            else if(progressX>=493){
                progressX = 493;
            }
          curser.style.left=progressX+'px'
          ready.style.width=progressX+'px'
    }
       document.onmouseup = function(e){
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
        }
        return false
    }
    //播放按钮切换
    const play=document.querySelector('.btns .play')
    play.addEventListener('click',function() {
       flag=!flag
       if(flag) {
          play.classList.add('palse')
       } else {
          play.classList.remove('palse')
       }
    })
    //音量
    const vol=document.querySelector('.volume')
    vol.addEventListener('click',function() {
       flag=!flag
       if(flag) {
          document.querySelector('.m-vol').style.display='block'
       } else {
          document.querySelector('.m-vol').style.display='none'
       }
    })
    //音量大小调节
    const vfupdown = document.querySelector('.f-updown')
    const vbtn=document.querySelector('.curr .btn')
    const vcur=document.querySelector('.vbg .curr')
    vbtn.onmousedown=function(e) {
       e=e||window.e
       const progressTop =vfupdown.offsetTop
       document.onmousemove = function(e) {
       e=e||window.e
          const progressY =progressTop-e.clientY
          if(progressY<=0){
                progressY = 0;
            }
            else if(progressY>=93){
                progressY = 93;
            }
        //vbtn.style.top=-5+progressY+'px'
          vcur.style.height=(progressY+10)+'px'
    }
       document.onmouseup = function(e){
            e = e || window.e
            document.onmousemove = null
            document.onmouseup = null
        }
        return false
    }

    //随机播放
    const mode=document.querySelector('.mode')
    const playmode=['随机','单曲循环','循环']
    let f=0
    mode.addEventListener('click',function() {
       if(f>2) f=0
       document.querySelector('.modetip').style.display='block'
       document.querySelector('.modetip').innerHTML=playmode[f]
       if (f===0) {
          document.querySelector('.mode').classList.remove('mode1')
          document.querySelector('.mode').classList.remove('mode2')
       }
       if (f===1) {
          document.querySelector('.mode').classList.add('mode1')
       }
       if (f===2) {
          document.querySelector('.mode').classList.add('mode2')
       }
       f++
    })
    mode.addEventListener('mouseleave',function() {
       document.querySelector('.modetip').style.display='none'
    })
    //播放列表
    const clos=document.querySelector('.f-close')
    clos.addEventListener('click',function() {
       document.querySelector('.f-playlist').style.display='none'
    })
    const showadd=document.querySelector('.controls .add')
    showadd.addEventListener('click',function() {
       flag=!flag
       document.querySelector('.f-playlist').style.display=flag?'block':'none'
    })


   

 </script>
    
</body>
<!-- js -->
<script src="./js/g-topbar.js"></script>
</html>